<template>
  <div class="box">
    <h2>分类</h2>
    <van-row justify="space-between">
      <van-col>
        <router-link :to="{ name: 'menwear' }">
          <span><img src="@/assets/images/classifyicon1.png" alt="" /></span>
          <span>男装</span>
        </router-link>
      </van-col>

      <van-col>
        <router-link :to="{ name: 'womenwear' }">
          <span><img src="@/assets/images/classifyicon2.png" alt="" /></span>
          <span>女装</span>
        </router-link>
      </van-col>

      <van-col>
        <router-link :to="{ name: 'dailyuse' }">
          <span><img src="@/assets/images/classifyicon3.png" alt="" /></span>
          <span>日用</span>
        </router-link>
      </van-col>

      <van-col>
        <router-link :to="{ name: 'techno' }">
          <span><img src="@/assets/images/classifyicon4.png" alt="" /></span>
          <span>数码</span>
        </router-link>
      </van-col>

      <van-col>
        <router-link :to="{ name: 'perfume' }">
          <span><img src="@/assets/images/classifyicon5.png" alt="" /></span>
          <span>运动</span>
        </router-link>
      </van-col>

      <van-col>
        <router-link :to="{ name: 'box' }">
          <span><img src="@/assets/images/classifyicon6.png" alt="" /></span>
          <span>包厢</span>
        </router-link>
      </van-col>

      <van-col>
        <router-link :to="{ name: 'mother' }">
          <span><img src="@/assets/images/classifyicon7.png" alt="" /></span>
          <span>母婴</span>
        </router-link>
      </van-col>

      <van-col>
        <router-link :to="{ name: 'menwear' }">
          <span><img src="@/assets/images/classifyicon8.png" alt="" /></span>
          <span>香水</span>
        </router-link>
      </van-col>
    </van-row>
  </div>
</template>

<script setup></script>

<style lang="less" scoped>
.box {
  padding: 0 5.333vw;
  h2 {
    padding-top: 5.067vw;
    margin-bottom: 11.2vw;
    color: #000;
    font-weight: 700;
  }
  .van-row {
    .van-col {
      background-color: #f5f5f7;
      height: 20vw;
      width: 41.5vw;
      padding-left: 4.533vw;
      margin-bottom: 5.333vw;
      span {
        display: block;
        margin-top: 2.4vw;
        color: #0a0a0a;
        font-size: 3.667vw;
        img {
          width: 6vw;
          height: 6vw;
        }
      }
    }
  }
}
</style>
